<template>
  <div>
    <el-card style="width: 50%">
      <el-form :model="user" label-width="80px" style="padding-right: 20px">
        <el-form-item label="原始密码" prop="username">
          <el-input v-model="user.password" placeholder="原始密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="username">
          <el-input v-model="user.newPassword" placeholder="新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="username">
          <el-input v-model="user.confirmPassword" placeholder="确认密码"></el-input>
        </el-form-item>
        <div style="text-align: center; margin: 20px">
          <el-button type="primary" @click="update">确认修改</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, unref } from 'vue'
import request from '../utils/request'
import { ElMessage } from 'element-plus'

const userStr = sessionStorage.getItem('honey-user') || '{}'
const user: any = ref(JSON.parse(userStr))
const rules = {
  password: [
    {
      required: true,
      message: '请输入原始密码',
      trigger: 'blur'
    }
  ]
}

const emit = defineEmits<{
  // <eventName>: <expected arguments>
  // change: []
  ['update:user']: [user: any] // named tuple syntax
}>()

// emit('change')
// emit('update', 1)

const update = async () => {
  // 保存当前的用户信息到数据库
  request.put('/user', unref(user)).then((res: any) => {
    if (res.code === '200') {

      // 保存成功后，更新当前的用户信息
      ElMessage.success('保存成功')

      localStorage.setItem('honey-user', JSON.stringify(unref(user)))

      emit('update:user', user.value)
    } else {

      ElMessage.error(res.msg)
es.msg)
    }
  })
}
</script>
<style scoped></style>
